<template>
<!-- 我们现在如果想要修改自己写的 组件的结构，就必须使用插槽 -->
  <MyTableVue :goods="goods">
    <template #head>
      <thead>
        <tr>
          <th>编号</th>
          <th>图片</th>
          <th>名称</th>
          <th>价格</th>
          <th>产地</th>
          <th width="100px">标签</th>
        </tr>
      </thead>
    </template>
    <!-- 这个item是 作用域插槽 帮忙生成的一个新对象，一个新地址，不是之前goods数组里面的额那个对象了 -->
    <!-- npm i vue-router@3.6.5 或者  yarn add vue-router@3.6.5 -->
    <!-- vue2 对应vue-router 3.x --------  vue3对应的vue-router 4.x -->
    <template #body="item">
      <td>{{item.id}}</td>
      <td><img :src="item.picture" /></td>
      <td>{{item.name1}}</td>
      <td>199.99</td>
      <td>北京</td>
      <td>
        <!-- <MyTag :tag="item.tag" @update_tag="item.tag = $event" /> -->
        <MyTag :tag="item.tag" @update_tag="fn($event, item)" />
      </td>
    </template>
  </MyTableVue>
</template>

<script>
import MyTableVue from "./components/MyTable.vue";
import MyTag from './components/MyTag.vue'

export default {
  components: { MyTableVue, MyTag },
  data(){
    return {
      goods: [
        { id: 101, picture: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg', name: '梨皮朱泥三绝清代小品壶经典款紫砂壶', tag: '茶具' },
        { id: 102, picture: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌', tag: '男鞋' },
        { id: 103, picture: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png', name: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm', tag: '儿童服饰' },
        { id: 104, picture: 'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg', name: '基础百搭，儿童套头针织毛衣1-9岁', tag: '儿童服饰' },
      ]
    }
  },
  methods: {
    fn(e, value){
      console.log('input按回车触发', e, value);
      const obj = this.goods.find(item => item.id === value.id)
      if(obj){
        obj.tag = e
      }
    }
  }
}
</script>

